<template>
  <div>
    <div class="j-brief">
      <router-link to="/society" tag="span" class="active">{{zannueBrief[0]}}</router-link>
      <router-link to="/school" tag="span">{{zannueBrief[1]}}</router-link>
    </div>
    <h1 v-if="isVisibly">{{staticText[1]}}</h1>
    <div class="menu" style="display: flex" v-if="isVisibly">
      <div class="choose">
        <el-select v-model="value" placeholder="请选择" @change="search">
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </div>
      <!-- <el-button type="primary" size="small" :class="{ban: isBan1}">
        <a :href="Raddress1" target="_blank" style="color: #fff;text-decoration: none;">智联招聘</a>
      </el-button>
      <el-button type="success" size="small" :class="{ban: isBan2}">
        <a :href="Raddress2" target="_blank" style="color: #fff;text-decoration: none;">51招聘</a>
      </el-button> -->
      <!-- <el-button type="primary" size="small" style="background-color: #00ae66;border-color: #00ae66;" v-if="!!email">
        <a href="javascript:void(0)" :title="email" style="color: #fff;text-decoration: none;">人事邮箱</a>
      </el-button> -->
      <!-- <div class="aniu"><img src="@/assets/xz.png" alt=""></div> -->
    </div>
    <p class="email"  v-if="!!email">招聘邮箱：{{email}}</p>
    <div class="list" v-for="list in lists" :key="list.id" @click="toDetails(list.id)" v-if="isVisibly">
      <span>{{list.post_title}}</span>
      <div>
        <span>{{staticText[2]}}</span>
        <img src="@/assets/blue.png" alt="">
      </div>
    </div>
    <div style="display:flex;justify-content: center;" class="fenye" v-if="isVisibly">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="8"
        :small="true"
        @current-change="handleCurrentChanges"
        >
      </el-pagination>
    </div>
    <p class="no" v-if="!isVisibly">To be updated</p>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import { getJobData, getJobListData } from '@/services/api.js'
export default {
  data () {
    return {
      lists: [],
      options: [],
      value: '',
      page: 1,
      total: null,
      id: null,
      Raddress1: null,
      Raddress2: null,
      email: null,
      isVisibly: false,
      isBan1: false,
      isBan2: false
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'staticText': 'staticText',
      'zannueBrief': 'zannueBrief'
    })
  },
  methods: {
    toDetails (current) {
      this.$router.push({name: 'zpDetails', params: {id: current}})
    },
    _getChList () {
      getJobData().then((res) => {
        this.options = res.list
        this.lists = res.data.data
        this.value = res.list[0].id
        this.id = res.list[0].id
        this.total = res.data.total
        this.Raddress1 = res.zl
        this.Raddress2 = res.job
        this.email = res.email
        if (!res.zl) {
          this.Raddress1 = 'javascript:void(0)'
          this.isBan1 = true
        } else {
          this.isBan1 = false
        }
        if (!res.job) {
          this.Raddress2 = 'javascript:void(0)'
          this.isBan2 = true
        } else {
          this.isBan2 = false
        }
      })
    },
    _getEnList () {
    },
    search (res) {
      this.id = res
      this.page = 1
      let params = {
        id: this.id,
        num: 8,
        page: this.page
      }
      getJobListData(params).then((res) => {
        console.log(res)
        if (!res) {
          this.lists = []
          this.isShow = true
        } else {
          this.lists = res.data.data
          this.total = res.data.total
          this.Raddress1 = res.zl
          this.Raddress2 = res.job
          this.email = res.email
          if (!res.zl) {
            this.Raddress1 = 'javascript:void(0)'
            this.isBan1 = true
          } else {
            this.isBan1 = false
          }
          if (!res.job) {
            this.Raddress2 = 'javascript:void(0)'
            this.isBan2 = true
          } else {
            this.isBan2 = false
          }
        }
      })
    },
    handleCurrentChanges (val) {
      this.page = val
      let params = {
        id: this.id,
        num: 8,
        page: this.page
      }
      getJobListData(params).then((res) => {
        if (!res) {
          this.lists = []
          this.isShow = true
        } else {
          this.lists = res.data.data
          this.total = res.data.total
          this.Raddress1 = res.zl
          this.Raddress2 = res.job
          this.email = res.email
          if (!res.zl) {
            this.Raddress1 = 'javascript:void(0)'
            this.isBan1 = true
          } else {
            this.isBan1 = false
          }
          if (!res.job) {
            this.Raddress2 = 'javascript:void(0)'
            this.isBan2 = true
          } else {
            this.isBan2 = false
          }
        }
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isVisibly = true
      }
      if (this.lang === 2) {
        this._getEnList()
        this.isVisibly = false
      }
    }
  },
  watch: {
    lang (newVal, oldVal) {
      if (newVal === 1) {
        this.isVisibly = true
      }
      if (newVal === 2) {
        this.isVisibly = false
      }
    }
  },
  created () {
    this.version()
    this.lists = [
      {
        id: 1,
        name: '会计'
      },
      {
        id: 2,
        name: '法规主管'
      },
      {
        id: 3,
        name: '生产副总'
      },
      {
        id: 4,
        name: '总经理'
      },
      {
        id: 5,
        name: 'ERP项目经理'
      },
      {
        id: 6,
        name: '生产总监'
      },
      {
        id: 7,
        name: '副经理(研发)'
      }
    ]
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import '@/util/common.scss';
.email {
  padding: .4rem;
  font-size: $baseFontSize2;
  color: $font-color-base;
}
.active {
  background-color: #2154b9;
  color: #fff!important;
}
.no {
  text-align: center;
  height: 130rem/$font-size-base;
  line-height: 130rem/$font-size-base
}
.menu {
  padding: 0 .4rem;
  button {
    margin-left: 16rem/$font-size-base
  }
}
.fenye {
  margin: 0 auto;
  margin-top: 50rem/$font-size-base;
  margin-bottom: 50rem/$font-size-base;
}
.el-button {
  padding: 0;
  width: 98px;
  height: 40px;
  text-align: center;
  line-height: 40px
}
.el-button--success {
  background-color: #ff6000;
  border-color: #ff6000;
}
.ban {
  background-color: #ccc;
  border-color: #ccc
}
h1 {
  padding: 36rem/$font-size-base 0;
  font-size: 30rem/$font-size-base;
  letter-spacing: 1px;
  color: #333;
  font-weight: bolder;
  text-align: left;
  padding-left: 30rem/$font-size-base;
}
.list {
  padding: 20rem/$font-size-base 30rem/$font-size-base;
  border-bottom: 1px dashed #ededed;
  display: flex;
  justify-content: space-between;
  span {
    font-size: $baseFontSize2;
    color: $font-color-base;
    padding: 0 10rem/$font-size-base;
    border-left: 3px solid #2154b9
  }
  div {
    display: flex;
    align-items: center;
    img {
      width: 10rem/$font-size-base;
      height: 16rem/$font-size-base;
      margin-right: 10rem/$font-size-base
    }
    span {
      border: 0;
      color: #2154b9;
    }
  }
}
</style>
